<template>
	<view class="nt-title" :class="{ border: isBorder }">
		<view class="nt-title__label">{{ label }}</view>
		<slot name="right"></slot>
	</view>
</template>

<script>
export default {
	props: {
		label: {
			type: String,
			default: ""
		},
		isBorder: {
			type: Boolean,
			default: false
		}
	}
}
</script>

<style lang="scss" scoped>
.nt-title{
	padding: 20rpx 0;
	display:flex;
	align-items: center;
	justify-content: space-between;
	&.border{
		border-bottom: 1rpx solid #eee;
	}
	&__label{
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		position: relative;
		padding-left: 20rpx;
		&::before{
			content: "";
			width: 6rpx;
			height: 40rpx;
			border-radius: 30rpx;
			background: var(--theme-color);
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
		}
	}
}
</style>